code for add to cart button

[manbru]

Hello,

I have the following code (it's both a size selector and add to cart button) in a custom liquid block in my product page.

However the problem is with the add to cart button, when you click the add to cart button it directs you to the cart page, but I want it to open the cart drawer when it's clicked on.

My product page: https://r1vex.myshopify.com/products/lindberg-antarctic-vinteroverall-black?_pos=2&_sid=fa65803e6&_s... 

The add to cart button code is in the bottom after:

"<!-- Köpformuläret som använder rätt variant-ID -->"

<style>
.size-selector {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
}

.size-option {
    background-color: #fff; /* Grå bakgrund för storlekar */
    color: #000; /* Svart textfärg */
    border: 2px solid transparent; /* Transparent kant som blir synlig vid hover och vald */
    border-radius: 4px;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.size-option:hover {
    border-color: #242f40; /* Svart kant vid hover */
}

.size-option.selected {
    background-color: #242f40; /* Svart bakgrund för vald storlek */
    color: #fff; /* Vit textfärg för vald storlek */
    border-color: #000; /* Svart kant för vald storlek */
}

.size-option.sold-out {
    background-color: #e0e0e0; /* Grå bakgrund för slutsåld */
    color: #999; /* Ljusare textfärg för slutsåld */
    cursor: not-allowed; /* Ändra muspekaren till en not-allowed ikon */
}

.sold-out::after {
    content: ' (Slutsåld)'; /* Text som visar att storleken är slutsåld */
    font-size: 0.9em; /* Mindre text för slutsåld indikation */
    color: #999; /* Samma färg som slutsåld text */
}

.selected-size {
    font-size: 14px; /* Storlek för vald storlek */
    color: #333; /* Färg för vald storlek */
    margin: 10px 0; /* Avstånd runt vald storlek */
    display: flex; /* Använd flex för att placera länk och storlek i rad */
    justify-content: space-between; /* Fördela utrymmet mellan dem */
}

.size-guide-link {
    text-decoration: underline; /* Understryk länk */
    color: #000; /* Svart färg för länk */
    cursor: pointer; /* Ändra muspekaren till pointer */
}

.product-form__submit {
    display: flex; /* Använd flex för att placera ikonen och texten i rad */
    align-items: center; /* Centrera ikonen vertikalt */
}

.product-form__submit .cart-icon {
    margin-right: 5px; /* Avstånd mellan ikonen och texten */
    width: 24px; /* Bredd för ikonen */
    height: 24px; /* Höjd för ikonen */
}
</style>

<!-- Kontrollera om det finns flera varianter -->
{% if product.variants.size > 1 %}
    <div class="selected-size">
        <span>Storlek:
            <!-- Visa den förvalda varianten -->
            {% assign selected_variant = product.selected_or_first_available_variant %}
            {{ selected_variant.title }}
        </span>
        <a href="https://kidos.se/pages/storleksguide" class="size-guide-link">Storleksguide</a> <!-- Länk till storleksguide -->
    </div>
    
    <!-- Dold Shopify standardvariantväljare (select-fält) -->
    <select id="variant-select" name="id" style="display: none;">
        {% for variant in product.variants %}
            <option value="{{ variant.id }}" {% if variant == selected_variant %}selected{% endif %}>
                {{ variant.title }}
            </option>
        {% endfor %}
    </select>
    
    <!-- Anpassad storleksväljare -->
    <div class="size-selector">
        {% for variant in product.variants %}
            <div class="size-option {% if variant.available == false %}sold-out{% endif %} {% if variant.id == selected_variant.id %}selected{% endif %}" 
                 data-variant-id="{{ variant.id }}" 
                 data-variant-title="{{ variant.title }}" 
                 onclick="selectSize(this, '{{ variant.id }}', '{{ variant.title }}', {{ variant.available }})">
                {{ variant.title }}
            </div>
        {% endfor %}
    </div>
    
    <!-- JavaScript för att hantera storleksval och synkronisera med Shopify's select-väljare -->
    <script>
    function selectSize(element, variantId, sizeTitle, isAvailable) {
        // Om varianten är slutsåld, gör inget
        if (!isAvailable) {
            return;
        }

        // Ta bort 'selected' klass från alla storleksalternativ
        var options = document.querySelectorAll('.size-option');
        options.forEach(function(option) {
            option.classList.remove('selected');
        });

        // Lägg till 'selected' klass till det valda alternativet
        element.classList.add('selected');
        
        // Uppdatera Shopify's dolda select-fält för variantval
        var variantSelect = document.getElementById('variant-select');
        variantSelect.value = variantId;

        // Uppdatera texten för vald storlek
        var selectedSizeText = document.querySelector('.selected-size span');
        if (selectedSizeText) {
            selectedSizeText.innerText = 'Storlek: ' + sizeTitle; // Uppdatera texten
        }

        // Uppdatera det dolda variant-ID i Shopify-formuläret
        var hiddenInput = document.querySelector('input[name="id"]');
        hiddenInput.value = variantId;
    }
    </script>
{% else %}
    <!-- Ingen variant, använd standardproduktens ID -->
    {% assign selected_variant = product.variants.first %}
{% endif %}

<!-- Köpformuläret som använder rätt variant-ID -->
<form method="post" action="/cart/add" enctype="multipart/form-data" id="product-form">
    <input type="hidden" name="id" value="{{ selected_variant.id }}">
    <button type="submit" class="product-form__submit button button--full-width button--primary">
        <img class="cart-icon" src="https://cdn.shopify.com/s/files/1/0831/6125/2166/files/Leksaker.png?v=1720806140" alt="Varukorg" />
        <strong>Lägg i varukorgen</strong>
    </button>
</form>

Thanks for helping!

[kevinkarma55]

Hi,

I think I understand want you looking for, right now your code submit and form right after add-to-cart click and my default form submit related product to cart and redirect to cart page, so in your case you need to stop that default actions and create you own function after onclick.

So I can provide you will the following code, which you can add between `<% endif %>` and `<form method="post" action="/cart/add" enctype="multipart/form-data" id="product-form">`

$('#product-form').on('submit', function(event) {
  event.preventDefault(); // prevent default form submission
  $.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: $(this).serialize(),
    dataType: 'json',
    success: function() {
      $('#cart-icon-bubble')[0].click()
    },
    error: function() {
      alert('Error adding product');
    }
  });
});

let me know if you see arror