cms custom column task step by step

cmstheme src 1.dataesolver CustomImageTextGalleryCmsElementResolver in public/admin no change views/storefront block cms-block-custom-image-text-gallery.html.twig {% block block_image_four_row %} {% set columns = 4 %} {% block block_image_four_row_left %} {% block block_image_four_row_left_image %} {% set element = block.slots.getSlot('left-image') %} {% block block_image_four_column_left_inner_image %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% block block_image_four_row_left_text %} {% set element = block.slots.getSlot('left-text') %} {% block block_image_four_column_left_inner_text %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% block block_image_four_row_left_button %} {% set element = block.slots.getSlot('left-button') %} {% block block_image_four_column_left_inner_button %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% endblock %} {% block block_image_text_row_center_left %} {% block block_image_text_row_center_left_image %} {% set element = block.slots.getSlot('center-left-image') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_text_row_center_left_text %} {% set element = block.slots.getSlot('center-left-text') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_four_row_center_left_button %} {% set element = block.slots.getSlot('center-left-button') %} {% block block_image_four_column_center_left_inner_button %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% endblock %} {% block block_image_text_row_center_right %} {% block block_image_text_row_center_right_image %} {% set element = block.slots.getSlot('center-right-image') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_text_row_center_right_text %} {% set element = block.slots.getSlot('center-right-text') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_four_row_center_right_button %} {% set element = block.slots.getSlot('center-right-button') %} {% block block_image_four_column_center_right_inner_button %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% endblock %} {% block block_image_text_row_right %} {% block block_image_text_row_right_image %} {% set element = block.slots.getSlot('right-image') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_text_row_right_text %} {% set element = block.slots.getSlot('right-text') %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% block block_image_four_row_right_button %} {% set element = block.slots.getSlot('right-button') %} {% block block_image_four_column_right_inner_button %} {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %} {% endblock %} {% endblock %} {% endblock %} {% endblock %} element cms-element-buy-button.html.twig {% block sw_cms_el_buy_button %} {% block sw_cms_element_buy_button_form_action %} {# {{ dump('test') }}#} {{ element.config.name.value}} {% en

May 28, 2025 - 19:40
cmstheme
src
1.dataesolver
    CustomImageTextGalleryCmsElementResolver

getFieldConfig();
        $imageConfig = $config->get('media');
        $backgroundImageConfig = $config->get('mobileMedia');

        $ids = [];
        if (!$imageConfig || $imageConfig->isMapped() || $imageConfig->getValue() === null) {
            //
        } else {
            array_push($ids, $imageConfig->getValue());
        }

        if (!$backgroundImageConfig || $backgroundImageConfig->isMapped() || $backgroundImageConfig->getValue() === null) {
            //
        } else {
            array_push($ids, $backgroundImageConfig->getValue());
        }

        if (count($ids) === 0) {
            return null;
        }

        $criteria = new Criteria($ids);

        $criteriaCollection = new CriteriaCollection();
        $criteriaCollection->add('media_' . $slot->getUniqueIdentifier(), MediaDefinition::class, $criteria);

        return $criteriaCollection;
    }

    public function enrich(CmsSlotEntity $slot, ResolverContext $resolverContext, ElementDataCollection $result): void
    {
        $config = $slot->getFieldConfig();
        $data = new ArrayEntity();
        $data->setUniqueIdentifier(Uuid::randomHex());
        $slot->setData($data);

        $image = new ImageStruct();
        $backgroundImage = new ImageStruct();

        $imageConfig = $config->get('media');
        $backgroundImageConfig = $config->get('mobileMedia');

        if ($imageConfig && $imageConfig->getValue()) {
            $this->addMediaEntity($slot, $image, $result, $imageConfig, $resolverContext);
        }
        $data->set('media', $image);

        if ($backgroundImageConfig && $backgroundImageConfig->getValue()) {
            $this->addMediaEntity($slot, $backgroundImage, $result, $backgroundImageConfig, $resolverContext);
        }
        $data->set('mobileMedia', $backgroundImage);
    }

    private function addMediaEntity(
        CmsSlotEntity         $slot,
        ImageStruct           $image,
        ElementDataCollection $result,
        FieldConfig           $config,
        ResolverContext       $resolverContext
    ): void
    {
        if ($config->isMapped() && $resolverContext instanceof EntityResolverContext) {
            /** @var MediaEntity|null $media */
            $media = $this->resolveEntityValue($resolverContext->getEntity(), $config->getValue());

            if ($media !== null) {
                $image->setMediaId($media->getUniqueIdentifier());
                $image->setMedia($media);
            }
        }

        if ($config->isStatic()) {
            $image->setMediaId($config->getValue());

            $searchResult = $result->get('media_' . $slot->getUniqueIdentifier());
            if (!$searchResult) {
                return;
            }

            /** @var MediaEntity|null $media */
            $media = $searchResult->get($config->getValue());
            if (!$media) {
                return;
            }

            $image->setMedia($media);
        }
    }
}

2.res
app
    admin/src
    module/sw-cms
        blocks/text-image
            custom-image-text-gallery
component
index.js

import template from "./sw-cms-block-custom-image-text-gallery.html.twig";
import "./sw-cms-block-custom-image-text-gallery.scss";

Shopware.Component.register("sw-cms-block-custom-image-text-gallery", {
    template,

    compatConfig: Shopware.compatConfig,
});

twig

{% block sw_cms_block_custom_image_text_gallery %}
    
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
        
            
            
            
        
    
{% endblock %}
scss

.sw-cms-block-image-text-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  align-content: stretch;
  align-items: start;
  grid-gap: 40px;

  .sw-cms-el-text {
    padding: 20px;
  }
  .sw-cms-el-image.is--cover {
    min-height: 20px;
  }
  .sw-cms-block-image-text-gallery__left,
  .sw-cms-block-image-text-gallery__center-left,
  .sw-cms-block-image-text-gallery__center-right,
  .sw-cms-block-image-text-gallery__right {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0%, 20%);
  }
}
.sw-cms-block-image-text-gallery-shop-button {
  display: grid;
  align-items: center;
}

preview
index.js

import template from './sw-cms-preview-custom-image-text-gallery.html.twig';
import './sw-cms-preview-custom-image-text-gallery.scss';

Shopware.Component.register("sw-cms-preview-custom-image-text-gallery", {
    template,
    compatConfig: Shopware.compatConfig,
    computed: {
        assetFilter() {
            return Shopware.Filter.getByName('asset');
        },
    },
});

twig

{% block sw_cms_block_custom_image_text_gallery_preview %}
    
        
            
                

            
            
                block1
                this is block1.
            
            
                
                    
                        Shop
                    
                
                
            
        

        
            
                
            
            
                block2
                this is block2
            
            
                
                    
                        Shop
                    
                
                
            
        

        
            
                
            
            
                block3
                this is block3
            
            
                
                    
                        Shop
                    
                
                
            
        

        
            
                
            
            
                block4
                this is block4
            
            
                
                    
                        Shop
                    
                
                
            
        
    
{% endblock %}

scss

.sw-cms-preview-custom-image-text-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 15px;

  .sw-cms-preview-custom-image-text-gallery__left,
  .sw-cms-preview-custom-image-text-gallery__center-left,
  .sw-cms-preview-custom-image-text-gallery__center-right,
  .sw-cms-preview-custom-image-text-gallery__right {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 20%);
  }

  .sw-cms-preview-custom-image-text-gallery__image {
    height: 60px;
  }

  .sw-cms-preview-custom-image-text-gallery__text {
    padding: 8px;
    text-align: center;
  }

  img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.sw-cms-block-image-text-gallery-shop-button {
  display: grid;
  align-items: center;
  .sw-button {
    height: 30px;
    width: auto;
    padding: 25px;
  }
  .sw-cms-el-buy-button__buy-action{
    font-size: smaller;
  }
}

index.js

import CMS from '../../../constant/sw-cms.constant';
import "./preview";
import "./component";


Shopware.Service("cmsService").registerCmsBlock({
    name: "custom-image-text-gallery",
    label: "CMS image-text-button block",
    category: "text-image",
    component: "sw-cms-block-custom-image-text-gallery",
    previewComponent: "sw-cms-preview-custom-image-text-gallery",
    defaultConfig: {
        marginBottom: "20px",
        marginTop: "20px",
        marginLeft: "20px",
        marginRight: "20px",
        sizingMode: "boxed",
    },
    slots: {
        "left-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_plant_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "left-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              block 1
              this is block1
            `.trim(),
                    },
                },
            },
        },
        "left-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "center-left-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_glasses_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "center-left-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block2
              this is block2
            `.trim(),
                    },
                },
            },
        },
        "center-left-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "center-right-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_plant_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "center-right-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block3
              this is block3
            `.trim(),
                    },
                },
            },
        },
        "center-right-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "right-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_camera_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "right-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block 4
              this is block 4
            `.trim(),
                    },
                },
            },
        },
        "right-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },
    },
});

            image-text-gallery/custom-image-text-gallery
index.js

import CMS from '../../../constant/sw-cms.constant';
import "./preview";
import "./component";


Shopware.Service("cmsService").registerCmsBlock({
    name: "custom-image-text-gallery",
    label: "CMS image-text-button block",
    category: "text-image",
    component: "sw-cms-block-custom-image-text-gallery",
    previewComponent: "sw-cms-preview-custom-image-text-gallery",
    defaultConfig: {
        marginBottom: "20px",
        marginTop: "20px",
        marginLeft: "20px",
        marginRight: "20px",
        sizingMode: "boxed",
    },
    slots: {
        "left-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_plant_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "left-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block 1
              this is block1
            `.trim(),
                    },
                },
            },
        },
        "left-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "center-left-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_glasses_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "center-left-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block2
              this is block2
            `.trim(),
                    },
                },
            },
        },
        "center-left-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "center-right-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_plant_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "center-right-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block3
              this is block3
            `.trim(),
                    },
                },
            },
        },
        "center-right-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },

        "right-image": {
            type: "image",
            default: {
                config: {
                    displayMode: { source: "static", value: "cover" },
                },
                data: {
                    media: {
                        value: "bundles/administration/static/img/cms/preview_camera_large.jpg",
                        source: "default",
                    },
                },
            },
        },
        "right-text": {
            type: "text",
            default: {
                config: {
                    content: {
                        source: "static",
                        value: `
              
block 4
              this is block 4
            `.trim(),
                    },
                },
            },
        },
        "right-button": {
            type: "buy-button",
            default: {
                config: {
                    name: {
                        source: "static",
                        value: "Shop",
                        required: true,
                    },
                    link: {
                        source: "static",
                        value: null,
                    },
                },
            },
        },
    },
});

        constant
sw-cms.constant.ts

const uniqueSlotsKebab = [
    'buy-box',
    'product-description-reviews',
    'cross-selling',
];

/**
 * @sw-package discovery
 */
// eslint-disable-next-line sw-deprecation-rules/private-feature-declarations
export default Object.freeze({
    REQUIRED_FIELD_ERROR_CODE: 'c1051bb4-d103-4f74-8988-acbcafc7fdc3',
    PAGE_TYPES: {
        SHOP: 'page',
        LANDING: 'landingpage',
        LISTING: 'product_list',
        PRODUCT_DETAIL: 'product_detail',
    },
    TYPE_MAPPING_ENTITIES: {
        product_detail: {
            entity: 'product',
            mode: 'single',
        },
        product_list: {
            entity: 'category',
            mode: 'single',
        },
    },
    UNIQUE_SLOTS: uniqueSlotsKebab.map((slotName) => slotName.replace(/-./g, (char) => char.toUpperCase()[1])),
    UNIQUE_SLOTS_KEBAB: uniqueSlotsKebab,
    SLOT_POSITIONS: {
        left: 0,
        'left-image': 100,
        'left-top': 200,
        'left-text': 300,
        'left-bottom': 400,
        'center-left': 1000,
        center: 1100,
        'center-image': 1200,
        'center-top': 1300,
        'center-text': 1400,
        'center-bottom': 1500,
        'center-right': 1600,
        right: 2000,
        'right-image': 2100,
        'right-top': 2200,
        'right-text': 2300,
        'right-bottom': 2400,
        content: 3000,
        image: 3100,
        video: 3200,
        imageSlider: 3300,
        default: 5000,
    },
    MEDIA: {
        previewCamera: 'bundles/administration/static/img/cms/preview_camera_large.jpg',
        previewMountain: 'bundles/administration/static/img/cms/preview_mountain_large.jpg',
        previewPlant: 'bundles/administration/static/img/cms/preview_plant_large.jpg',
        previewGlasses: 'bundles/administration/static/img/cms/preview_glasses_large.jpg',
        SMALL:{
            previewCamera: 'framework/assets/default/cms/preview_camera_small.jpg',
            previewMountain: 'framework/assets/default/cms/preview_mountain_small.jpg',
            previewPlant: 'framework/assets/default/cms/preview_plant_small.jpg',
            previewGlasses: 'framework/assets/default/cms/preview_glasses_small.jpg',
        }
    },
});


        elements/buy-button
component
index.js

import template from "./sw-cms-el-buy-button.html.twig";
import "./sw-cms-el-buy-button.scss";

const { Mixin } = Shopware;

Shopware.Component.register("sw-cms-el-buy-button", {
    template,

    compatConfig: Shopware.compatConfig,

    mixins: [Mixin.getByName("cms-element"), Mixin.getByName("placeholder")],

    computed: {
        name() {
            return this.element?.config?.name?.value ?? "Shop";
        },
        redirectTo() {
            return this.element.config?.link?.value ?? null;
        },
    },

created(){
        this.createdComponent();
},
    methods: {
        createdComponent() {
            this.initElementConfig("buy-button");
            this.initElementData("buy-button");
        },
    },
});

twig

{% block sw_cms_el_buy_button %}
    {#    {{ dump('test') }}#}
    

        {% block sw_cms_element_buy_button_form_action %}
            
                
                    {{ name }}
                
            
        {% endblock %}
    
{% endblock %}

scss

.sw-cms-el-buy-button {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
  font-size: smaller;
  color: darkgrey;

  &__placeholder {
    background-color: gray;
    height: 10px;
    border-radius: 10px;
    margin-bottom: 16px;
    max-width: 150px;

    &:nth-of-type(1) {
      height: 26px;
      max-width: 130px;
    }

    &:nth-of-type(2) {
      max-width: 100px;
      margin-bottom: 10px;
    }

    &:nth-of-type(3) {
      margin-bottom: 32px;
    }

    &:nth-of-type(4) {
      height: 16px;
      max-width: 300px;
    }

    &:nth-of-type(6) {
      margin-top: 16px;
    }
  }

  &__form {
    display: inline-flex;
    width: 100%;
  }

  &__quantity.sw-block-field {
    flex: 1;
    max-width: 150px;
    margin-bottom: 0;

    .sw-block-field__block {
      position: relative;
    }

    select {
      padding: 9px;
    }
  }

  &__variant-title {
    font-weight: bold;
  }

  &__variants {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 24px;
    height: 36px;
    max-width: 260px;
  }

  &__variant {
    width: 80px;
    margin-right: 8px;
    background: gray;

    &:last-of-type {
      margin-right: 0;
    }
  }

  &__icon {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 10px;
    top: calc(50% - 15px);
    color: darkgrey;

    .icon--regular-chevron-up-xxs {
      width: 16px;
      height: 16px;
      padding-top: 5px;
      padding-right: 4px;
      padding-bottom: 6px;
      padding-left: 4px;
    }

    .icon--regular-chevron-down-xxs {
      width: 16px;
      height: 16px;
      padding-top: 6px;
      padding-right: 4px;
      padding-bottom: 5px;
      padding-left: 4px;
    }
  }

  &__actions {
    flex: 2;
    margin-left: 8px;
    max-width: 300px;
  }

  &__buy-action {
    display: block;
    line-height: 40px;
    font-size: small;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: white;
    background: gray;
    border-radius: 10px;
  }

  &__price {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 16px;
  }

  &__tax-info {
    margin-bottom: 10px;
  }

  &__shipping-info {
    margin-bottom: 32px;
    margin-left: 14px;
  }

  &__product-number-title {
    font-weight: bold;
  }

  &__product-number {
    margin-top: 16px;
  }
}

config
index.js

import template from "./sw-cms-el-config-buy-button.html.twig";
import "./sw-cms-el-config-buy-button.scss";
const { Mixin } = Shopware;
Shopware.Component.register("sw-cms-el-config-buy-button", {
    template,
    compatConfig: Shopware.compatConfig,

    emits: ["element-update"],

    mixins: [Mixin.getByName("cms-element")],

    created() {
        this.createdComponent();
    },

    methods: {
createdComponent(){
            this.initElementConfig("buy-button");
},
        onChange() {
            this.$emit("element-update", this.element);
        },
    },

});

twig

{% block sw_cms_element_buy_button_config %}
    
        {% block sw_cms_element_buy_button_config_product_select %}
            

            
        {% endblock %}
    
{% endblock %}

scss

.sw-cms-el-config-buy-button {
  &__alignment.sw-block-field,
  .sw-entity-single-select {
    margin-bottom: 0;
  }

  .sw-entity-single-select__selection {
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

  .sw-entity-single-select__selection-text {
    vertical-align: middle;
    padding-right: 16px;
    width: 100%;
  }
}

preview
index.js

import template from "./sw-cms-el-preview-buy-button.html.twig";
import "./sw-cms-el-preview-buy-button.scss";

Shopware.Component.register("sw-cms-el-preview-buy-button", {
    template,
    compatConfig: Shopware.compatConfig,
});

twig

{% block sw_cms_element_buy_button_preview %}

    shop
    

{% endblock %}

scss

.sw-cms-el-preview-buy-button {
  height: 100%;
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &__price {
    font-size: smaller;
  }

  &__placeholders {
    display: grid;
    grid-template-columns: 10px 1fr;
    grid-gap: 4px;
    margin-top: 4px;

    & > .sw-cms-el-preview-buy-button__placeholder {
      width: 60px;
      margin: 0;

      &:nth-child(odd) {
        width: 8px;
        margin-right: 4px;
      }
    }
  }

  &__placeholder {
    height: 8px;
    border-radius: 50% 50%;
    background-color: gray;
  }

  &__action {
    background: gray;
    color: darkgrey;
    border-radius: 50% 50%;
    text-align: center;
    font-size: smaller;
    line-height: 26px;
    width: 100%;
    margin-top: 4px;
    align-self: flex-end;
  }
}

index.js

import './preview';
import './component';
import './config';

/**
 * @private
 * @sw-package discovery
 */
Shopware.Service("cmsService").registerCmsElement({
    name:"buy-button",
    label:"sw-cms.elements.buyButton.label",
    component:"sw-cms-el-buy-button",
    configComponent:"sw-cms-el-config-buy-button",
    previewComponent:"sw-cms-el-preview-buy-button",
    disabledConfigInfoTextKey:
        "sw-cms.elements.buyButton.infoText.tooltipSettingDisabled",
    defaultConfig:{
        name:{
            source:"static",
            value:"shop",
            required:true,
        },
        link:{
            source:"static",
            value:null,
        }
    },
    collect:Shopware.Service("cmsService").getCollectFunction(),
});

        snippet
de

{
  "sw-cms": {
    "elements": {
      "general": {
        "config": {
          "caption": {
            "mediaUpload": "Hochladen ein Bild"
          },
          "label": {
            "verticalAlign": "Vertikal ausrichten",
            "alignment": "Ausrichtung",
            "verticalAlignTop": "Spitze",
            "verticalAlignCenter": "Center",
            "verticalAlignBottom": "Unten",
            "displayMode": "Anzeige Modus",
            "displayModeStandard": "Original",
            "displayModeCover": "Beschnitten",
            "displayModeStretch": "Skaliert",
            "displayModeContain": "Behoben Höhe",
            "autoSlide": "Automatisch Übergang",
            "autoplayTimeout": "Verzögerung",
            "speed": "Animation Dauer",
            "horizontalAlign": "Horizontal ausrichten",
            "horizontalAlignLeft": "Links",
            "horizontalAlignCenter": "Center",
            "horizontalAlignRight": "Rechts"
          },
          "helpText": {
            "autoSlide": "Vorübergehend unbenutzt",
            "autoplayTimeout": "Dauer sollen bleiben Trotzdem",
            "speed": "gleiten Geschwindigkeit",
            "displayMode": "Bild angezeigt"
          },
          "tab": {
            "content": "Inhalt",
            "settings": "Einstellungen",
            "options": "Optionen"
          },
          "infoText": {
            "listingElement": "Probe Layout"
          }
        },
        "switch": {
          "groups": {
            "all": "Alle elements",
            "favorites": "Favorit Elemente"
          }
        }
      },
      "buyButton": {
        "label": "Buy Button",
        "infoText": {
          "tooltipSettingDisabled": "Probe Vorschau"
        },
        "config": {
          "label": {
            "buttonText": "Taste Text",
            "redirectLink": "Umleiten Link"
          },
          "placeholder": {
            "buttonText": "Eingeben Taste Text",
            "redirectLink": "/#"
          }
        },
        "component": {
          "label": {
            "actionBuy": "Add to cart",
            "taxInfo": "Steuerinformationen",
            "deliveryShippingFree": "Kostenloser Versand",
            "deliveryTime": "Verfügbar, Lieferzeit {name}",
            "variants": "Varianten",
            "productNumber": "Produktnummer:"
          }
        }
      }
    },
    "blocks": {
      "textImage": {
        "centerText": {
          "label": "Drei Spalten, Bilder und Text in Kästen"
        },
        "imageText": {
          "label": "Zwei Spalten, eingerahmtes Bild und Text"
        },
        "imageTextBubble": {
          "label": "Dreispaltig, beschriftet & gerundet"
        },
        "imageTextCover": {
          "label": "Zwei Spalten, Bild und Text in voller Größe"
        },
        "imageTextGallery": {
          "label": "Dreispaltig, Bild-/Textkarten"
        },
        "imageTextRow": {
          "label": "Dreispaltige, beschriftete Bilder"
        },
        "textOnImage": {
          "label": "Heldenbild"
        }
      }
    }
  }
}

en

{
  "sw-cms": {
    "elements": {
      "general": {
        "config": {
          "caption": {
            "mediaUpload": "Upload an image"
          },
          "label": {
            "verticalAlign": "Vertical align",
            "alignment": "Alignment",
            "verticalAlignTop": "Top",
            "verticalAlignCenter": "Center",
            "verticalAlignBottom": "Bottom",
            "displayMode": "Display mode",
            "displayModeStandard": "Original",
            "displayModeCover": "Cropped",
            "displayModeStretch": "Scaled",
            "displayModeContain": "Fixed height",
            "autoSlide": "Automatic transition",
            "autoplayTimeout": "Delay",
            "speed": "Animation duration",
            "horizontalAlign": "Horizontal align",
            "horizontalAlignLeft": "Left",
            "horizontalAlignCenter": "Center",
            "horizontalAlignRight": "Right"
          },
          "helpText": {
            "autoSlide": "Temporily unused",
            "autoplayTimeout": "duration should stay still",
            "speed": "sliding speed",
            "displayMode": "image displayed"
          },

          "tab": {
            "content": "Content",
            "settings": "Settings",
            "options": "Options"
          },
          "infoText": {
            "listingElement": "sample layout"
          }
        },
        "switch": {
          "groups": {
            "all": "All elements",
            "favorites": "Favourite elements"
          }
        }
      },
      "buyButton": {
        "label": "Buy Button",
        "infoText": {
          "tooltipSettingDisabled": "sample preview"
        },
        "config": {
          "label": {
            "buttonText": "Button Text",
            "redirectLink": "Redirect Link"
          },
          "placeholder": {
            "buttonText": "Enter Button Text",
            "redirectLink": "/#"
          }
        },
        "component": {
          "label": {
            "actionBuy": "Add to cart",
            "taxInfo": "tax info",
            "deliveryShippingFree": "Free shipping",
            "deliveryTime": "Available, delivery time {name}",
            "variants": "Variants",
            "productNumber": "Product number:"
          }
        }
      }
    },
    "blocks": {
      "textImage": {
        "centerText": {
          "label": "Three columns, boxed images & text"
        },
        "imageText": {
          "label": "Two columns, boxed image & text"
        },
        "imageTextBubble": {
          "label": "Three columns, captioned & rounded"
        },
        "imageTextCover": {
          "label": "Two columns, full-sized image & text"
        },
        "imageTextGallery": {
          "label": "Three columns, image/text cards"
        },
        "imageTextRow": {
          "label": "Three columns, captioned images"
        },
        "textOnImage": {
          "label": "Hero image"
        }
      }
    }
  }
}

main.js

import './module/sw-cms/blocks/text-image/custom-image-text-gallery';
import './module/sw-cms/elements/buy-button';

    in storefront no change keep as it it
dist/storefront/js/cms-theme
src

config
services.xml





    
        
            
        
    


in public/admin no change

views/storefront
block
cms-block-custom-image-text-gallery.html.twig

{% block block_image_four_row %}
    {% set columns = 4 %}
    {% block block_image_four_row_left %}
        
            {% block block_image_four_row_left_image %}
                {% set element = block.slots.getSlot('left-image') %}
                {% block block_image_four_column_left_inner_image %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
            {% block block_image_four_row_left_text %}
                {% set element = block.slots.getSlot('left-text') %}
                {% block block_image_four_column_left_inner_text %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
            {% block block_image_four_row_left_button %}
                {% set element = block.slots.getSlot('left-button') %}
                {% block block_image_four_column_left_inner_button %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
        
    {% endblock %}

    {% block block_image_text_row_center_left %}
        
            {% block block_image_text_row_center_left_image %}
                {% set element = block.slots.getSlot('center-left-image') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_text_row_center_left_text %}
                {% set element = block.slots.getSlot('center-left-text') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_four_row_center_left_button %}
                {% set element = block.slots.getSlot('center-left-button') %}
                {% block block_image_four_column_center_left_inner_button %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
        
    {% endblock %}

    {% block block_image_text_row_center_right %}
        
            {% block block_image_text_row_center_right_image %}
                {% set element = block.slots.getSlot('center-right-image') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_text_row_center_right_text %}
                {% set element = block.slots.getSlot('center-right-text') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_four_row_center_right_button %}
                {% set element = block.slots.getSlot('center-right-button') %}
                {% block block_image_four_column_center_right_inner_button %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
        
    {% endblock %}

    {% block block_image_text_row_right %}
        
            {% block block_image_text_row_right_image %}
                {% set element = block.slots.getSlot('right-image') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_text_row_right_text %}
                {% set element = block.slots.getSlot('right-text') %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
            {% endblock %}
            {% block block_image_four_row_right_button %}
                {% set element = block.slots.getSlot('right-button') %}
                {% block block_image_four_column_right_inner_button %}
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ element.type ~ '.html.twig' ignore missing %}
                {% endblock %}
            {% endblock %}
        
    {% endblock %}
{% endblock %}

element
cms-element-buy-button.html.twig
{% block sw_cms_el_buy_button %}

    
        {% block sw_cms_element_buy_button_form_action %}
{#            {{ dump('test') }}#}
            
                    
                        {{ element.config.name.value}}
                    
            
        {% endblock %}
    
{% endblock %}