Product Page code - The Best of MOI

moi-product-content.liquid

<div class="single-product-banner__content">
                
    <div class="sigle-product__review">

        <div class="yotpo bottomLine"
            data-product-id="{{ product.id }}">
        </div>
        <a class="reviews-wrap__link" href="#single-product__reviews-wrap"></a>
     
        {% comment %} 
            <div class="yotpo-widget-instance" 
                data-yotpo-instance-id="371110" 
                data-yotpo-product-id="{{product.id}}" 
                data-yotpo-cart-product-id="{{item.product.id}}" 
                data-yotpo-section-id="{{template.name}}">
            </div>
        {% endcomment %}
    </div>

    <h1 class="sigle-product__title">{{ product.title }}</h1>
    <div class="sigle-product__cat">
        <span class="prodrcut-category">{{ product.type }}</span>
    </div>

    {% #CD CODE %}
    {% if product.metafields.custom.flavours %}
      <div class="custom_flavours_list">
        {% for flavours in product.metafields.custom.flavours.value %}
          {% assign flavours_img_link = flavours | split: '||' %}
          {% assign product_handle = flavours_img_link[0] | handle %}
          <div class="flavours_btn{% if product.handle == product_handle %} is_active{% endif %}">
            <a href="{{ all_products[product_handle].url }}" class="image">
              <img src="{{ flavours_img_link[1] }}">
            </a>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <p class="single-product_short_description">
        10 x 40ml Bottles
    </p>

    {% comment %} <div style="padding:5px;border:2px solid red;background-color:white;">
        This is for debugging purposes<br>
        {% for single_variant in product.variants %}
            Variant ID: {{ single_variant.id }}<br>
            {% for selling_plan_allocation in single_variant.selling_plan_allocations %}
                indexnumber:{{ forloop.index }}<br>
                checkout_charge_amount:{{ selling_plan_allocation.checkout_charge_amount }}<br>
                compare_at_price:{{ selling_plan_allocation.compare_at_price }}<br>
                selling_plan.name:{{ selling_plan_allocation.selling_plan.name }}<br>
                selling_plan.id:{{ selling_plan_allocation.selling_plan.id }}<br>
            {% endfor %}
        {% endfor %} 
    </div> {% endcomment %}

        {% comment %} {% for selling_plan_group in product.selling_plan_groups %}
            Selling Plan Group: {{ selling_plan_group.name }}<br>
            Selling Plan Group ID: {{ selling_plan_group.id }}<br>
            {% for selling_plan in selling_plan_group.selling_plans %}
                selling_plan.id:{{ selling_plan.id }}<br>
                selling_plan.name:{{ selling_plan.name }}<br>
                selling_plan.checkout_charge:{{ selling_plan.name }}<br>
            {% endfor %}
        {% endfor %} {% endcomment %}
    {% comment %} </div> {% endcomment %}


    {%- form 'product', product -%}
      
        <input id="input__variant-id" type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
        <input id="input__qty" type="hidden" name="quantity" min="1" max="1" value="1">
        
        {{ product.selected_or_first_available_variant.selling_plan_allocation.checkout_charge_amount }}
        {% if product.selling_plan_groups.size > 0 %}
         <input type="hidden" name="selling_plan" id="input__selling-plan" value="{{ product.selected_or_first_available_selling_plan_allocation.selling_plan.id }}"/>
        {% endif %}
    
        {% if product.available == true %}
            {%- assign regular_price  = product.price | money_without_currency -%}
            <div class="moi-product-radio__wrapper">
                <label class="options-checked moi-radio onetime-radio active" for="moi-radio1">
                    <span class="moi-radio__label">
                        <span class="checkmark"></span>
                        <input id="moi-radio1" class="moi-radio__input" type="radio" name="purchaseOption" value="onetime" chacked data-gtm-form-interact-field-id="0">
                        <span class="btn-text moi-radio__onetime">
                            <span class="btn-text" >One-time purchase</span>
                        </span>
                    </span>
                    <span class="moi-radio__price">
                        <span>{{ product.price | money }}</span>
                        <span class="moi-radio__price-label">{{ cart.currency.symbol }}{{ regular_price | divided_by: 10.00 }} ea.</span>
                    </span>
                   
                </label>

                <div class="options-checked subscription-options-wrapper">
                    
                    <label class="moi-radio subscription-options-default" for="moi-radio-def">
                        <span class="moi-radio__label">
                            <span class="checkmark"></span>
                            <input id="moi-radio1" class="moi-radio__input" type="radio" name="" value="">
                            <span class="btn-text">
                                <span class="btn-text" >Subscribe & Save up to 25%</span>
                            </span>
                        </span>
                        <span class="moi-radio__price">
                            <svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9.68209 9.674C9.69209 9.662 9.69609 9.646 9.70609 9.634L16.6881 1.92C17.0781 1.486 17.0781 0.782 16.6881 0.348C16.6841 0.344 16.6801 0.342 16.6761 0.34C16.5893 0.234911 16.4806 0.150037 16.3577 0.0913105C16.2347 0.032584 16.1004 0.00142139 15.9641 0H1.99809C1.85932 0.00224243 1.72273 0.0349295 1.59797 0.0957527C1.47321 0.156576 1.36333 0.244052 1.27609 0.352L1.27209 0.348C1.08335 0.566371 0.979492 0.845367 0.979492 1.134C0.979492 1.42263 1.08335 1.70163 1.27209 1.92L8.27009 9.674C8.35721 9.77612 8.46545 9.85813 8.58734 9.91436C8.70922 9.97059 8.84186 9.99971 8.97609 9.99971C9.11033 9.99971 9.24296 9.97059 9.36485 9.91436C9.48674 9.85813 9.59497 9.77612 9.68209 9.674Z" fill="black"/>
                            </svg>
                        </span>
                    </label>

                    <div class="moi-subscription-options">
                        {% for single_variant in product.variants %}
                            {% for selling_plan_allocation in single_variant.selling_plan_allocations %}
                                {%- if forloop.index == 1 -%}
                                    {%- assign two_box_regular_price  = regular_price | times: 1 -%}
                                    {%- assign two_box_selling_price  = selling_plan_allocation.price | money_without_currency | times: 1 -%}
                                    {% comment %} Monthly Subscription: Option 1. Must Add 2 Products at time {% endcomment %}
                                    <label class="moi-radio subscription-radio" for="moi-radio2">
                                        <span class="moi-radio__label">
                                            <span class="moi-radio__subscription">
                                                <span class="checkmark"></span>
                                                <input id="moi-radio2" class="moi-radio__input" type="radio" name="purchaseOption" value="subscription-1" data-qty="1" data-sellingplan-id="{{ selling_plan_allocation.selling_plan.id }}">
                                                <span class="btn-text">1 box (10 bottles) monthly <small>save {{ cart.currency.symbol }}{{ two_box_regular_price | minus: two_box_selling_price }}</small></span>
                                            </span>
                                        </span>
                                        <span class="moi-radio__price">
                                            <span>{{ cart.currency.symbol }}{{ two_box_selling_price }}</span>
                                            <span class="moi-radio__price-label">{{ cart.currency.symbol }}{{ selling_plan_allocation.price | money_without_currency | divided_by: 10.00 }} ea.</span>
                                        </span>
                                    </label>
                                {%- endif -%}
                                {%- if forloop.index == 2 -%}
                                    {%- assign three_box_regular_price  = regular_price | times: 3 -%}
                                    {%- assign three_box_selling_price  = selling_plan_allocation.price | money_without_currency | times: 3 -%}
                                {% comment %} Monthly Subscription: Option 3. Must Add 3 Products at time {% endcomment %}
                                <label class="moi-radio subscription-radio" for="moi-radio3">
                                    <span class="moi-radio__label">
                                        <span class="moi-radio__subscription">
                                            <span class="checkmark"></span>
                                            <input id="moi-radio3" class="moi-radio__input" type="radio" name="purchaseOption" value="subscription-3" data-qty="3" data-sellingplan-id="{{ selling_plan_allocation.selling_plan.id }}">
                                            <span class="btn-text">3 boxes (30 bottles) monthly <small>save {{ cart.currency.symbol }}{{ three_box_regular_price | minus: three_box_selling_price }}</small></span>
                                        </span>
                                    </span>
                                        <span class="moi-radio__price">
                                            <span>{{ cart.currency.symbol }}{{ three_box_selling_price }}</span>
                                            <span class="moi-radio__price-label">{{ cart.currency.symbol }}{{ selling_plan_allocation.price | money_without_currency | divided_by: 10.00 }} ea.</span>
                                        </span>
                                </label>
                                {%- endif -%}
                                {%- if forloop.index == 3 -%}
                                    {%- assign nine_box_regular_price  = regular_price | times: 6 -%}
                                    {%- assign nine_box_selling_price  = selling_plan_allocation.price | money_without_currency | times: 6 -%}
                                    {% comment %} Quarterly Subscription: Option 1. Must Add 9 Products at time {% endcomment %}
                                    <label class="moi-radio subscription-radio" for="moi-radio4">
                                        <span class="moi-radio__label">
                                            <span class="moi-radio__subscription">
                                                <span class="checkmark"></span>
                                                <input id="moi-radio4" class="moi-radio__input" type="radio" name="purchaseOption" value="subscription-6" data-qty="6" data-sellingplan-id="{{ selling_plan_allocation.selling_plan.id }}">
                                                <span class="btn-text">6 boxes (60 bottles) monthly <small>save {{ cart.currency.symbol }}{{ nine_box_regular_price | minus: nine_box_selling_price }}</small></span>
                                            </span>
                                        </span>
                                            <span class="moi-radio__price">
                                                <span>{{ cart.currency.symbol }}{{ nine_box_selling_price }}</span>
                                                <span class="moi-radio__price-label">{{ cart.currency.symbol }}{{ selling_plan_allocation.price | money_without_currency | divided_by: 10.00 }} ea.</span>
                                            </span>
                                    </label>
                                {%- endif -%}
                            {% endfor %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% else %}
            <h2 class="moi-section-title"><span class="moi-highlight-text">Product is not available right now !</span></h2>
        {% endif %}

        <div class="single-product_subscribe-btn-wrap">
            <span class="single-product_subscribe-note">FREE carbon-neutral delivery to your door. Cancel at anytime.</span>
        </div>

        <div class="single-product_buynow-btn">
            <button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded" id="cart-checkout" data-href="/checkout"  data-testid="Checkout-button">Add to Cart</button>
            {% comment %} <a href="/checkout">Buy Now</a> {% endcomment %}
        </div>
        
    {% endform %}

</div>