Impulse theme- Add a second button to Text Columns with Images

cocktailsbycand
Tourist
7 0 2

hi there, I'd like to be able to add a second button per column to the TEXT COLUMN WITH IMAGES. 

Here is the current code, which looks like the picture below. I need a second linkable button per column. Thanks for your help!

Screenshot 2021-06-08 at 13.41.16.png

 

{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}

<div class="page-width">
  {%- if section.settings.title != blank -%}
    <div class="section-header text-{{ section.settings.align_text }}">
      <h2>{{ section.settings.title }}</h2>
    </div>
  {%- endif -%}

  <div class="grid{% unless section.blocks.size == 5 %} grid--uniform{% endunless %} grid--flush-bottom">
    {%- liquid
      assign grid_item_width = 'medium-up--one-third'
      case section.blocks.size
        when 1
          assign grid_item_width = 'medium-up--one-half'
        when 2
          assign grid_item_width = 'medium-up--one-half'
        when 4
          assign grid_item_width = 'medium-up--one-half'
      endcase
    -%}
    {%- for block in section.blocks -%}
      {%- if section.blocks.size == 5 and forloop.index < 3 -%}
        {%- assign column_width = 'medium-up--one-half' -%}
      {%- else -%}
        {%- assign column_width = grid_item_width -%}
      {%- endif -%}
      <div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }} data-aos="row-of-3">
        {%- if block.settings.enable_image -%}
          <div style="{% if section.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width }}px;">
            {%- if block.settings.button_link != blank -%}
              <a href="{{ block.settings.button_link }}">
            {%- endif -%}
            {%- if block.settings.image != blank -%}
              <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image.aspect_ratio }}%;">
                {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                <img class="lazyload"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080]"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ block.settings.image.alt }}">
              </div>
            {%- else -%}
              <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
            {%- endif -%}
            {%- if block.settings.button_link != blank -%}
              </a>
            {%- endif -%}
          </div>
        {%- endif -%}
        {%- if block.settings.title != blank -%}
          <h3>{{ block.settings.title }}</h3>
        {%- endif -%}
        {%- if block.settings.text != blank -%}
          <div class="rte-setting text-spacing">{{ block.settings.text }}</div>
        {%- endif -%}
        {%- if block.settings.button_label != blank -%}
          <a href="{{ block.settings.button_link }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label }}
          </a>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>
</div>

{%- if section.settings.divider -%}</div>{%- endif -%}

{% schema %}
  {
    "name": "Text columns with images",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading"
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Alignment",
        "default": "center",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Centered"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "range",
            "id": "image_width",
            "label": "Image width",
            "default": 650,
            "min": 60,
            "max": 650,
            "step": 10,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Example title"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text columns with images",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}

 

 

0 Likes
cocktailsbycand
Tourist
7 0 2

Bump

0 Likes
bdowling
Explorer
66 13 34

Hi, I found a solution. First you'll add some details to the settings. Then you'll add the second button.

Step 1: Find this chunk of code (you can change the labels and defaults... do not change the type or id unless you see a bug):

 

          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          }
        ]

 

and add this chunk of code:

 

         ,{
            "type": "checkbox",
             "id": "activate_second_button",
            "default": true,
           "label": "Activate second button"
       },
       {
            "type": "text",
            "id": "button_label_2",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Link"
          }

 

 right before the closing bracket so it looks like this now:

 

          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          } ,
         {
            "type": "checkbox",
             "id": "activate_second_button",
            "default": true,
           "label": "Activate second button"
       },
       {
            "type": "text",
            "id": "button_label_2",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Link"
          }
        ]

 

 

Step 2: Now, find this chunk of code:

 

        {%- if block.settings.button_label != blank -%}
          <a href="{{ block.settings.button_link }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label }}
          </a>
        {%- endif -%}

 

and directly under that put this chunk of code:

 

        {%- if block.settings.activate_second_button -%}
          <a href="{{ block.settings.button_link_2 }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label_2 }}
          </a>
        {%- endif -%}

 

 

Done. Now, in the theme customizer, you should be able to:

a) choose if a second button is displayed

b) choose the label for the second button

c) choose the link for the button

I hope this helps. Good luck

 

0 Likes
cocktailsbycand
Tourist
7 0 2

Thank you so much for this! Unfortunately, it's not showing anything extra at all in the event customizer? Is there a step I've missed perhaps?

{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}

<div class="page-width">
  {%- if section.settings.title != blank -%}
    <div class="section-header text-{{ section.settings.align_text }}">
      <h2>{{ section.settings.title }}</h2>
    </div>
  {%- endif -%}

  <div class="grid{% unless section.blocks.size == 5 %} grid--uniform{% endunless %} grid--flush-bottom">
    {%- liquid
      assign grid_item_width = 'medium-up--one-third'
      case section.blocks.size
        when 1
          assign grid_item_width = 'medium-up--one-half'
        when 2
          assign grid_item_width = 'medium-up--one-half'
        when 4
          assign grid_item_width = 'medium-up--one-half'
      endcase
    -%}
    {%- for block in section.blocks -%}
      {%- if section.blocks.size == 5 and forloop.index < 3 -%}
        {%- assign column_width = 'medium-up--one-half' -%}
      {%- else -%}
        {%- assign column_width = grid_item_width -%}
      {%- endif -%}
      <div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }} data-aos="row-of-3">
        {%- if block.settings.enable_image -%}
          <div style="{% if section.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width }}px;">
            {%- if block.settings.button_link != blank -%}
              <a href="{{ block.settings.button_link }}">
            {%- endif -%}
            {%- if block.settings.image != blank -%}
              <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image.aspect_ratio }}%;">
                {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                <img class="lazyload"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080]"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ block.settings.image.alt }}">
              </div>
            {%- else -%}
              <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
            {%- endif -%}
            {%- if block.settings.button_link != blank -%}
              </a>
            {%- endif -%}
          </div>
        {%- endif -%}
        {%- if block.settings.title != blank -%}
          <h3>{{ block.settings.title }}</h3>
        {%- endif -%}
        {%- if block.settings.text != blank -%}
          <div class="rte-setting text-spacing">{{ block.settings.text }}</div>
        {%- endif -%}
        {%- if block.settings.button_label != blank -%}
          <a href="{{ block.settings.button_link }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label }}
          </a>
        {%- endif -%}
                {%- if block.settings.activate_second_button -%}
          <a href="{{ block.settings.button_link_2 }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label_2 }}
          </a>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>
</div>

{%- if section.settings.divider -%}</div>{%- endif -%}

{% schema %}
  {
    "name": "Text columns with images",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading"
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Alignment",
        "default": "center",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Centered"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "range",
            "id": "image_width",
            "label": "Image width",
            "default": 650,
            "min": 60,
            "max": 650,
            "step": 10,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Example title"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          },
 {
            "type": "checkbox",
             "id": "activate_second_button",
            "default": true,
           "label": "Activate second button"
       },
       {
            "type": "text",
            "id": "button_label_2",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link_2",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text columns with images",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}
0 Likes
bdowling
Explorer
66 13 34

DD191661-67DE-45DE-87E1-B092EA1102BB.jpeg

Hmm.. I'm testing on a free theme but it should still at least be showing up for you.  I just re-checked my solution and it's working for me in the Debut theme. I'm not seeing anything wrong with your code either so I'm surprised nothing is changing.

Are you sure you're going to the Theme editor NOT the code editor? In the Theme (WYSIWYG editor) Editor, the input for the second button settings should be right under the inputs for the original button settings. 

0 Likes
cocktailsbycand
Tourist
7 0 2

Super odd!  This is what i see on the WYSIWYG editor

cocktailsbycand_0-1624298554750.png

 

0 Likes
bdowling
Explorer
66 13 34

This makes me think there's something in your theme disabling these new setting... maybe try different id's for the new settings because those could be already taken...

I haven't seen this before. I will look into this in a bit. Good luck

0 Likes
cocktailsbycand
Tourist
7 0 2

ahh i think i've solved the problem- i actually am trying to amend a block and not a section, do I need to do something to the block code also?

Block code is here"

{%- liquid
  assign text_column_count = 0
  assign column_1_enabled = false
  assign column_2_enabled = false
  assign column_3_enabled = false
  if block.settings.enable_image_1 or block.settings.title_1 != blank or block.settings.text_1 != blank
    assign column_1_enabled = true
    assign text_column_count = text_column_count | plus: 1
  endif
  if block.settings.enable_image_2 or block.settings.title_2 != blank or block.settings.text_2 != blank
    assign column_2_enabled = true
    assign text_column_count = text_column_count | plus: 1
  endif
  if block.settings.enable_image_3 or block.settings.title_3 != blank or block.settings.text_3 != blank
    assign column_3_enabled = true
    assign text_column_count = text_column_count | plus: 1
  endif

  case text_column_count
    when 1
      assign grid_item_width = ''
    when 2
      assign grid_item_width = 'medium-up--one-half'
    when 3
      assign grid_item_width = 'medium-up--one-third'
  endcase
-%}

<div class="index-section">
  <div class="page-width text-{{ block.settings.align_text }}">
    {%- if block.settings.title != blank -%}
      <div class="section-header">
        <h2>{{ block.settings.title }}</h2>
      </div>
    {%- endif -%}

    <div class="grid grid--flush-bottom">
      {%- if column_1_enabled -%}
        <div class="grid__item {{ grid_item_width }}" data-aos="row-of-3">
          {%- if block.settings.enable_image_1 -%}
            <div style="{% if block.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width_1 }}px;">
              {%- if block.settings.button_link_1 != blank -%}
                <a href="{{ block.settings.button_link_1 }}">
              {%- endif -%}
              {%- if block.settings.image_1 != blank -%}
                <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image_1.aspect_ratio }}%;">
                  {%- assign img_url = block.settings.image_1 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  <img class="lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ block.settings.image_1.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ block.settings.image_1.alt }}">
                </div>
              {%- else -%}
                <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
              {%- endif -%}
              {%- if block.settings.button_link_1 != blank -%}
                </a>
              {%- endif -%}
            </div>
          {%- endif -%}
          {%- if block.settings.title_1 != blank -%}
            <p class="h3">{{ block.settings.title_1 }}</p>
          {%- endif -%}
          {%- if block.settings.text_1 != blank -%}
            <div class="rte-setting text-spacing">{{ block.settings.text_1 }}</div>
          {%- endif -%}
          {%- if block.settings.button_label_1 != blank -%}
            <a href="{{ block.settings.button_link_1 }}" class="btn btn--secondary btn--small">
              {{ block.settings.button_label_1 }}
            </a>
          {%- endif -%}
        </div>
      {%- endif -%}

      {%- if column_2_enabled -%}
        <div class="grid__item {{ grid_item_width }}" data-aos="row-of-3">
          {%- if block.settings.enable_image_2 -%}
            <div style="{% if block.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width_2 }}px;">
              {%- if block.settings.button_link_2 != blank -%}
                <a href="{{ block.settings.button_link_2 }}">
              {%- endif -%}
              {%- if block.settings.image_2 != blank -%}
                <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image_2.aspect_ratio }}%;">
                  {%- assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  <img class="lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ block.settings.image_2.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ block.settings.image_2.alt }}">
                </div>
              {%- else -%}
                <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
              {%- endif -%}
              {%- if block.settings.button_link_2 != blank -%}
                </a>
              {%- endif -%}
            </div>
          {%- endif -%}
          {%- if block.settings.title_2 != blank -%}
            <p class="h3">{{ block.settings.title_2 }}</p>
          {%- endif -%}
          {%- if block.settings.text_2 != blank -%}
            <div class="rte-setting text-spacing">{{ block.settings.text_2 }}</div>
          {%- endif -%}
          {%- if block.settings.button_label_2 != blank -%}
            <a href="{{ block.settings.button_link_2 }}" class="btn btn--secondary btn--small">
              {{ block.settings.button_label_2 }}
            </a>
          {%- endif -%}
        </div>
      {%- endif -%}

      {%- if column_3_enabled -%}
        <div class="grid__item {{ grid_item_width }}" data-aos="row-of-3">
          {%- if block.settings.enable_image_3 -%}
            <div style="{% if block.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width_3 }}px;">
              {%- if block.settings.button_link_3 != blank -%}
                <a href="{{ block.settings.button_link_3 }}">
              {%- endif -%}
              {%- if block.settings.image_3 != blank -%}
                <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image_3.aspect_ratio }}%;">
                  {%- assign img_url = block.settings.image_3 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                  <img class="lazyload"
                      data-src="{{ img_url }}"
                      data-widths="[180, 360, 540, 720, 900, 1080]"
                      data-aspectratio="{{ block.settings.image_3.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ block.settings.image_3.alt }}">
                </div>
              {%- else -%}
                <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
              {%- endif -%}
              {%- if block.settings.button_link_3 != blank -%}
                </a>
              {%- endif -%}
            </div>
          {%- endif -%}
          {%- if block.settings.title_3 != blank -%}
            <p class="h3">{{ block.settings.title_3 }}</p>
          {%- endif -%}
          {%- if block.settings.text_3 != blank -%}
            <div class="rte-setting text-spacing">{{ block.settings.text_3 }}</div>
          {%- endif -%}
          {%- if block.settings.button_label_3 != blank -%}
            <a href="{{ block.settings.button_link_3 }}" class="btn btn--secondary btn--small">
              {{ block.settings.button_label_3 }}
            </a>
          {%- endif -%}
        </div>
      {%- endif -%}
    </div>
  </div>
</div>
0 Likes
bdowling
Explorer
66 13 34

Ok, so to clarify: the original section code was for NOT the part of your site you thought it was (which is why it isn't showing up) and now this is the code corresponding to the part of the site you want to add a second button to? 

If that's the case, it should be a similar solution once you find the settings schema for this block.

 

0 Likes