CODEWITHSUNDEEP
javascripthtmlcssshopify
MorganPubblicita
MorganPubblicita

Reputation: 101

Show popup instead of redirect to cart (Shopify)

my website: https://www.fermento24.com

I'd like to make it so that, when a client clicks on the add to cart button, instead of being redirected to cart I'd like for a popup with a resume of what's in the cart at the moment to appear.

Current code:

<form action="/cart/add" method="post" class="variants clearfix" id="cart-form-4955949236295">                                    
        <input type="hidden" name="id" value="32764390834247">  
        <a class="add-cart-btn">
          <i class="icon-basket"></i>
        </a>
      </form>

I wanted to add a popup that shows data similar to the popup of the minicar on top right, but I couldn't manage to do it. Anyone has suggestion on how to improve this feature?

Minicart code:

<div class="has-items">
        <ul class="mini-products-list">  
          {% for item in cart.items %}
          <li class="item" id="cart-item-{{item.id}}">
            <a href="{{item.url}}" title="{{item.title}}" class="product-image">
              <img src="{{ item.image | product_img_url: 'small' }}" alt="{{item.title}}"></a>
            <div class="product-details">
              <p class="product-name"><a href="{{item.url}}">{{ item.product.title }}
                {% if item.product.variants.size != 0 %}
                {% unless item.variant.title contains 'Default' %}
                {{ item.variant.title }}
                {% endunless %}
                {% endif %}</a></p>
              <div class="cart-collateral"><span class="price">{{item.price | money}}</span> x {{item.quantity}}</div>
            </div>
            <a href="javascript&colon;void(0)" title="Remove This Item" class="btn-remove"><span class="zmdi zmdi-close"></span></a>
          </li>
          {% endfor %}
        </ul>
        <div class="summary">   
          <div>
          <hr style="visibility: visible;">
          <p class="stilefont"style="font-size:13px; text-align:center; padding-left: 10px; padding-right: 10px;line-height: 1.3;"><b>Consegna gratuita</b> in 24/48h in <b>Italia</b> per ordini superiori ai 120€ altimetri il costo è di 10€.</p>
  <hr style="visibility: visible;">
<p class="stilefont"style="font-size:13px; text-align:center; padding-left: 10px; padding-right: 10px;line-height: 1.3;"> <b>Consegna gratuita in giornata </b> in provincia di <a href="https://www.fermento24.com/pages/spedizione" id="category-link" style="color: #000000; font-weight:bold; text-decoration: underline;"><b>Napoli*</b></a> e<a href="https://www.fermento24.com/pages/spedizione" id="category-link" style="color: #000000; font-weight:bold; text-decoration: underline;"><b> Caserta*</b></a> per ordini superiori ai 25€ altrimenti il costo è di 3.50€</p>
   <hr style="visibility: visible;">
          </div>
          <p class="total">
            <span class="label">{{ 'cart.general.cart_total' | t }}</span>
            <span class="price">{{cart.total_price | money}}</span> 
          </p>
        </div>
        <div class="actions">
          <button class="btn" onclick="window.location='/checkout'"><i class="icon-check"></i>{{ 'cart.general.checkout' | t }}</button>
          <button class="btn text-cart" onclick="window.location='/cart'"><i class="icon-basket"></i>{{ 'cart.general.view_cart' | t }}</button>
        </div>
      </div>

Upvotes: 0

Views: 2457

Answers (1)

Onkar
Onkar

Reputation: 2584

If I am not wrong then you using the Winee Shopify premium theme template over your website?

You can check the demo store and you can check over the homepage, there is an AJAX cart that is inbuilt into this theme template.

You just need to check into documentation and enable it for the frontend.

Upvotes: 1

Related Questions