Shopify [Liquid] - 用于基于日期的横幅的自定义框

Question

我的任务是自定义一个框或创建一个部分，以便我们可以放置一个主图像，该图像将根据设置进行更改。例如：我有 picture1 和 picture2。我希望 picture2 仅在周末显示；此外，最好设置一个截止日期，这样即使我们忘记停用它，我们的客户也不会被误导，以为促销仍在进行。

我真的是网页设计界的新手，所以我拿了一个已经存在的盒子（并且有点接近我想要的）。我重新设计了它，它有效，但我想知道是否有更好的方法来做到这一点。

这是我添加到“简单”框中的内容。

{
    "type": "simple",
    "name": "Simple",
    "settings": [
      {
        "type": "url",
        "id": "link",
        "label": "Link"
      },
      {
        "type": "text",
        "id": "text",
        "label": "Title"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "Imagen principal"
      },
      {
        "type": "image_picker",
        "id": "imagepar",
        "label": "Imagen de promoción"
      },
      {
        "type": "header",
        "content": "Layout"
      },
      {
        "type": "select",
        "id": "width",
        "label": "Width",
        "default": "50",
        "options": [
          {
            "value": "33",
            "label": "33%"
          },
          {
            "value": "50",
            "label": "50%"
          },
          {
            "value": "100",
            "label": "100%"
          }
        ]
      },

在这一部分，您可以 select 您希望宣传片显示的日期。我觉得它可能会更好。但据我所知，Shopify 没有 date/day 盒子选择器。

      {
    "type": "header",
    "content": "Elige los días"
     },
    {
        "type": "checkbox",
        "id": "Lunes",
        "label": "Lunes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Martes",
        "label": "Martes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Miercoles",
        "label": "Miércoles",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Jueves",
        "label": "Jueves",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Viernes",
        "label": "Viernes",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Sabado",
        "label": "Sábado",
        "default": false
      },
    {
        "type": "checkbox",
        "id": "Domingo",
        "label": "Domingo",
        "default": false
      },

现在，我称之为：

{%- when 'simple' -%}
            {%- liquid
              assign block_img = ''
              assign block_text = ''
              if block.settings.link contains '/products/'
                assign product_handle = block.settings.link | remove: '/products/'
                assign block_img = all_products[product_handle].featured_media.preview_image
                assign block_text = all_products[product_handle].title
              elsif block.settings.link contains '/collections/'
                assign lang_code_string = request.locale.iso_code | prepend: '/'
                assign collection_handle = block.settings.link | remove: '/collections/' | remove: lang_code_string
                assign block_text = collections[collection_handle].title
                if collections[collection_handle].image
                  assign block_img = collections[collection_handle].image
                else
                  assign block_img = collections[collection_handle].products[0].featured_image
                endif
              endif
              if block.settings.text != ''
                assign block_text = block.settings.text
              endif
              assign todaynumber = 'now' | date: '%u'
              case todaynumber
                when '1'
                    if block.settings.Lunes
                        assign checkday = true
                    endif
                when '2'
                    if block.settings.Martes
                        assign checkday = true
                    endif                
                when '3'
                    if block.settings.Miercoles
                        assign checkday = true
                    endif
                when '4'
                    if block.settings.Jueves
                        assign checkday = true
                    endif
                when '5'
                    if block.settings.Viernes
                        assign checkday = true
                    endif
                when '6'
                    if block.settings.Sabado
                        assign checkday = true
                    endif
                when '7'
                    if block.settings.Domingo
                        assign checkday = true
                    endif
                endcase
              if block.settings.image
                if checkday
                    assign block_img = block.settings.imagepar
                else
                    assign block_img = block.settings.image
                endif
              endif
            -%}

因此，如您所见，我使用了 case 语句来检查今天的日期并询问复选框是否为真。这可行，但远非漂亮。谁能指出我正确的方向？谢谢！

Answer 1

据我所知，您有 2 个关于您发布的代码的请求：

您想整理您的代码
您想添加一个支票，在设定的截止日期后禁用促销功能

整理一下代码

对产品和系列使用适当的 specialized input settings，而不是在设置中粘贴 URL 并操纵字符串。

因此，将 "id": "link" 的设置替换为以下内容：

    "settings": [
      {
          "type": "product",
          "id": "product",
          "label": "Product",
          "info": "The image of this product will be used for the block"
      },
      {
          "type": "collection",
          "id": "collection",
          "label": "Collection",
          "info": "If no product is selected, the block image will be the collection image or the image of the first product of the collection"
      },

然后用以下液体代码替换操作 URL 字符串的代码：

    if block.settings.product
      assign block_text = product.title
      assign block_img = product.featured_media.preview_image
    elsif block.settings.collection
      assign block_text = collection.title
      if collection.image
        assign block_img = collection.image
      else
        assign block_img = collection.products[0].featured_media
      endif
    endif

让我们实施截止日期检查

因为我们没有日期选择器，所以我们添加一个文本输入设置

{
  "type": "text",
  "id": "deadline",
  "label": "deadline",
  "info": "Insert date in the format dd-mm-yyyy"
}

不幸的是，我们无法对此输入进行客户端验证，因此我们可能会在不信任用户的情况下在 liquid 中使用此设置（如果截止日期输入无效，则更好地解释如果截止日期已过）。

基本上你不必用 split filter 解析输入文本并将其与 now 进行比较。看到你的行 assign todaynumber = 'now' | date: '%u'... 一旦你将比较包含在一个布尔值中，你就可以使用这个变量将我们迄今为止生成的所有代码包装在一个大的 if 语句中。

我把实现留给你...

Shopify [Liquid] - 用于基于日期的横幅的自定义框

Shopify [Liquid] - Custom box for day-based banners

html

json

date

liquid

shopify