Post by BatuBskn » Sat May 27, 2023 11:16 pm

This listing looks very old and not useful, I made a few changes on the original cart page of this opencart, I removed the update button and so on. but I don't like this listing at all, it's not mobile friendly, you have to swipe.

Is it possible to do something like the photos I sent below, can you help? Thank you.

desktop: https://streamable.com/fpjjwc
mobile: https://streamable.com/3m13la

Code: Select all

{{ header }}
<div id="checkout-cart" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  {% if attention %}
  <div class="alert alert-info"><i class="fa fa-info-circle"></i> {{ attention }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  {% if success %}
  <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  {% if error_warning %}
  <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
    <button type="button" class="close" data-dismiss="alert">&times;</button>
  </div>
  {% endif %}
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h1>{{ heading_title }}
        {% if weight %}
        &nbsp;({{ weight }})
        {% endif %} </h1>
      <form action="{{ action }}" method="post" enctype="multipart/form-data">
        <div class="table-responsive">
          <table class="table table-bordered">
            <thead>
              <tr>
                <td class="text-center">{{ column_image }}</td>
                <td class="text-left">{{ column_name }}</td>
                <td class="text-left">{{ column_model }}</td>
                <td class="text-left">{{ column_quantity }}</td>
                <td class="text-right">{{ column_price }}</td>
                <td class="text-right">{{ column_total }}</td>
              </tr>
            </thead>
            <tbody>
            
            {% for product in products %}
            <tr>
              <td class="text-center">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /></a> {% endif %}</td>
              <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if not product.stock %} <span class="text-danger">***</span> {% endif %}
                {% if product.option %}
                {% for option in product.option %} <br/>
                <small>{{ option.name }}: {{ option.value }}</small> {% endfor %}
                {% endif %}
                {% if product.reward %} <br/>
                <small>{{ product.reward }}</small> {% endif %}
                {% if product.recurring %} <br/>
                <span class="label label-info">{{ text_recurring_item }}</span> <small>{{ product.recurring }}</small> {% endif %}</td>
              <td class="text-left">{{ product.model }}</td>
              <td class="text-left"><div class="input-group btn-block" style="max-width: 200px;">
                  <input type="text" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" size="1" class="form-control" />
                  <span class="input-group-btn">
                  <button type="submit" data-toggle="tooltip" title="{{ button_update }}" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger" onclick="cart.remove('{{ product.cart_id }}');"><i class="fa fa-times-circle"></i></button>
                  </span></div></td>
              <td class="text-right">{{ product.price }}</td>
              <td class="text-right">{{ product.total }}</td>
            </tr>
            {% endfor %}
            {% for voucher in vouchers %}
            <tr>
              <td></td>
              <td class="text-left">{{ voucher.description }}</td>
              <td class="text-left"></td>
              <td class="text-left"><div class="input-group btn-block" style="max-width: 200px;">
                  <input type="text" name="" value="1" size="1" disabled="disabled" class="form-control" />
                  <span class="input-group-btn">
                  <button type="button" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger" onclick="voucher.remove('{{ voucher.key }}');"><i class="fa fa-times-circle"></i></button>
                  </span></div></td>
              <td class="text-right">{{ voucher.amount }}</td>
              <td class="text-right">{{ voucher.amount }}</td>
            </tr>
            {% endfor %}
              </tbody>
            
          </table>
        </div>
      </form>
      {% if modules %}
      <h2>{{ text_next }}</h2>
      <p>{{ text_next_choice }}</p>
      <div class="panel-group" id="accordion"> {% for module in modules %}
        {{ module }}
        {% endfor %} </div>
      {% endif %} <br/>
      <div class="row">
        <div class="col-sm-4 col-sm-offset-8">
          <table class="table table-bordered">
            {% for total in totals %}
            <tr>
              <td class="text-right"><strong>{{ total.title }}:</strong></td>
              <td class="text-right">{{ total.text }}</td>
            </tr>
            {% endfor %}
          </table>
        </div>
      </div>
      <div class="buttons clearfix">
        <div class="pull-left"><a href="{{ continue }}" class="btn btn-default">{{ button_shopping }}</a></div>
        <div class="pull-right"><a href="{{ checkout }}" class="btn btn-primary">{{ button_checkout }}</a></div>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</div>
{{ footer }} 

Newbie

Posts

Joined
Tue Nov 01, 2022 5:26 am

Post by softmonke » Sun May 28, 2023 7:03 am

It's definitely doable - I've done fully customized OpenCart themes with fully responsive cart layouts similar to the one you've linked. It's not too difficult but it's not easy as well - especially if you are a beginner developer. Here are some tips on how to do so:

1. For the cart layout, the reason why the current one is not responsive and requires horizontal scrolling in mobile view is because the cart products are displayed in a <table>. Try to use a <div> instead with "display: flex;" property and manipulate the content accordingly. Flex property will allow you to easily manipulate the contents of the div and make it responsive.

2. For the quantity input field with add and subtract quantity buttons, you can use Bootstrap's input group class to add the buttons in. You will also need to add an event listener for manual updates to the input field, and trigger POST requests to the server to update the actual cart quantity whenever there are changes made to the input field after a short delay. For the add/subtract buttons - same thing - you will need to listen for click events on the buttons, and trigger POST requests to the server to update cart quantity. You might also need to add your own functions in the cart controller file (catalog/controller/checkout/cart.php) and/or the system cart file (system/library/cart/cart.php) for updating the cart quantity. You will probably also need to validate the input field using jQuery/JavaScript to ensure that quantity doesn't go negative, and only integers are allowed to be entered.

3. For cart image size, you should be able to specify the image size in your theme settings in OpenCart admin. You can probably use the "img-responsive" or "img-fluid" class from Bootstrap on your cart image as well.

4. Other than that, for the other aspects of the cart layout you're trying to replicate, they can be all be done through CSS. You just need to play around with the different CSS properties to achieve that look.

Reach out to us at hello@softmonke.com for your OpenCart web development needs.


User avatar
Active Member

Posts

Joined
Tue May 23, 2023 4:42 am

Who is online

Users browsing this forum: moreduff and 266 guests