cart.liquid

{{ "cart.css" | asset_url | stylesheet_tag }}

{%- assign color_scheme          = section.settings.color_scheme -%}
{%- assign padding_top           = section.settings.padding_top -%}
{%- assign padding_bottom        = section.settings.padding_bottom -%}
{%- assign padding_top_mobile    = section.settings.padding_top_mobile -%}
{%- assign padding_bottom_mobile = section.settings.padding_bottom_mobile -%}

{% comment %} CSS variables start {% endcomment %}
{%- capture variables -%}
  {%- case padding_top -%}
    {%- when 'small' -%}
      --padding-top: 24px;
    {%- when 'medium' -%}
      --padding-top: 68px;
    {%- when 'large' -%}
      --padding-top: 112px;
  {%- endcase -%}

  {%- case padding_bottom -%}
    {%- when 'small' -%}
      --padding-bottom: 24px;
    {%- when 'medium' -%}
      --padding-bottom: 68px;
    {%- when 'large' -%}
      --padding-bottom: 112px;
  {%- endcase -%}

  {%- case padding_top_mobile -%}
    {%- when 'small' -%}
      --padding-top-mobile: 24px;
    {%- when 'medium' -%}
      --padding-top-mobile: 40px;
    {%- when 'large' -%}
      --padding-top-mobile: 60px;
  {%- endcase -%}

  {%- case padding_bottom_mobile -%}
    {%- when 'small' -%}
      --padding-bottom-mobile: 24px;
    {%- when 'medium' -%}
      --padding-bottom-mobile: 40px;
    {%- when 'large' -%}
      --padding-bottom-mobile: 60px;
  {%- endcase -%}
{%- endcapture -%}

{%- render 'variables-cart-lines' -%}
{%- render 'variables-cart-services' -%}
{%- render 'variables-cart-totals' -%}
{% comment %} CSS variables end {% endcomment %}

<div class="cart__wrapper color-{{ color_scheme.id }}" style="{{- variables | escape -}}">
  <div class="cart__container container{% if padding_top != blank or padding_top_mobile != blank %} cart__container--padding-top{% endif %}{% if padding_bottom != blank or padding_bottom_mobile != blank %} cart__container--padding-bottom{%- endif -%}">

    <div class="cart__lines">
      {{ cart | lines }}
    </div>

    <div class="cart__footer">
      {{ cart | services }}
      {{ cart | totals }}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Cart",
    "description": "Display all necessary information about the cart",
    "tag": "section",
    "class": "cart",
    "settings": [
      {
        "type": "header",
        "content": "General settings"
      },
      {
        "type": "color_scheme",
        "id": "color_scheme",
        "label": "Color scheme",
        "default": "set-1"
      },
      {
        "type": "header",
        "content": "Desktop settings"
      },
      {
        "type": "select",
        "id": "padding_top",
        "label": "Padding top",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "small"
      },
      {
        "type": "select",
        "id": "padding_bottom",
        "label": "Padding bottom",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "none"
      },
      {
        "type": "header",
        "content": "Mobile settings"
      },
      {
        "type": "select",
        "id": "padding_top_mobile",
        "label": "Padding top",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "small"
      },
      {
        "type": "select",
        "id": "padding_bottom_mobile",
        "label": "Padding bottom",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "none"
      }
    ],
    "templates": ["cart"],
    "unique": true,
    "important": true
  }
{% endschema %}