src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js - Code Metrics - Inspection of "Merge branch 'next-23222/adjust-icon-sizes' into '..." - shopware/platform - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — trunk ( 8d97f6...0d07dc )

by Christian

created 2022-12-22 10:25 UTC

src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js A

↳ Parent: Project

Complexity

Total Complexity	25
Complexity/F	1.56

Size

Lines of Code	168
Function Count	16

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	95
dl	0
loc	168
rs	10
c	0
b	0
f	0
wmc	25
mnd	9
bc	9
fnc	16
bpm	0.5625
cpm	1.5625
noi	1

import template from './sw-cms-el-cross-selling.html.twig';
import './sw-cms-el-cross-selling.scss';

const { Mixin } = Shopware;

const { isEmpty } = Shopware.Utils.types;

/**
 * @private
 * @package content
 */
export default {
    template,

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

    data() {
        return {
            sliderBoxLimit: 3,
        };
    },

    computed: {
        demoProductElement() {
            return {
                config: {
                    boxLayout: {
                        source: 'static',
                        value: this.element.config.boxLayout.value,
                    },
                    displayMode: {
                        source: 'static',
                        value: this.element.config.displayMode.value,
                    },
                    elMinWidth: {
                        source: 'static',
                        value: this.element.config.elMinWidth.value,
                    },
                },
            };
        },

        sliderBoxMinWidth() {
            if (this.element.config.elMinWidth.value && this.element.config.elMinWidth.value.indexOf('px') > -1) {
                return `repeat(auto-fit, minmax(${this.element.config.elMinWidth.value}, 1fr))`;
            }

            return null;
        },

        currentDeviceView() {
            return this.cmsPageState.currentCmsDeviceView;
        },

        crossSelling() {
            if (!this.element.data.product || !this.element.data.product.crossSellings.length) {
                return {
                    name: 'Cross selling title',
                };
            }

            return this.element.data.product.crossSellings[0];
        },

        crossSellingProducts() {
            return (this.element.data.product.crossSellings.length)
                ? this.element.data.product.crossSellings[0].assignedProducts
                : [];
        },

        currentDemoEntity() {
            if (this.cmsPageState.currentMappingEntity === 'product') {
                return this.cmsPageState.currentDemoEntity;
            }

            return null;
        },
    },

    watch: {
        'element.config.elMinWidth.value': {
            handler() {
                this.setSliderRowLimit();
            },
        },

        currentDeviceView() {
            setTimeout(() => {
                this.setSliderRowLimit();
            }, 400);
        },
    },

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

    mounted() {
        this.mountedComponent();
    },

    methods: {
        createdComponent() {
            this.initElementConfig('cross-selling');
            this.initElementData('cross-selling');
        },

        mountedComponent() {
            this.setSliderRowLimit();
        },

        setSliderRowLimit() {
            if (isEmpty(this.element.config)) {
                this.createdComponent();
            }

            if (this.currentDeviceView === 'mobile'
                || (this.$refs.productHolder && this.$refs.productHolder.offsetWidth < 500)
            ) {
                this.sliderBoxLimit = 1;
                return;
            }

            if (!this.element.config.elMinWidth.value ||
                this.element.config.elMinWidth.value === 'px' ||
                this.element.config.elMinWidth.value.indexOf('px') === -1) {
                this.sliderBoxLimit = 3;
                return;
            }

            if (parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10) <= 0) {
                return;
            }

            // Subtract to fake look in storefront which has more width
            const fakeLookWidth = 100;
            const boxWidth = this.$refs.productHolder.offsetWidth;
            const elGap = 32;
            let elWidth = parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10);

            if (elWidth >= 300) {
                elWidth -= fakeLookWidth;
            }

            this.sliderBoxLimit = Math.floor(boxWidth / (elWidth + elGap));
        },

        getProductEl(product) {
            return {
                config: {
                    boxLayout: {
                        source: 'static',
                        value: this.element.config.boxLayout.value,
                    },
                    displayMode: {
                        source: 'static',
                        value: this.element.config.displayMode.value,
                    },
                },
                data: {
                    product,
                },
            };
        },
    },
};


1			import template from './sw-cms-el-cross-selling.html.twig';
2			import './sw-cms-el-cross-selling.scss';
3
4			const { Mixin } = Shopware;
			0 ignored issues – show Bug introduced 2019-10-17 13:30 UTC by Report Bug Copy Issue Report The variable `Shopware` seems to be never declared. If this is a global, consider adding a `/** global: Shopware */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
5			const { isEmpty } = Shopware.Utils.types;
6
7			/**
8			* @private
9			* @package content
10			*/
11			export default {
12			template,
13
14			mixins: [
15			Mixin.getByName('cms-element'),
16			Mixin.getByName('placeholder'),
17			],
18
19			data() {
20			return {
21			sliderBoxLimit: 3,
22			};
23			},
24
25			computed: {
26			demoProductElement() {
27			return {
28			config: {
29			boxLayout: {
30			source: 'static',
31			value: this.element.config.boxLayout.value,
32			},
33			displayMode: {
34			source: 'static',
35			value: this.element.config.displayMode.value,
36			},
37			elMinWidth: {
38			source: 'static',
39			value: this.element.config.elMinWidth.value,
40			},
41			},
42			};
43			},
44
45			sliderBoxMinWidth() {
46			if (this.element.config.elMinWidth.value && this.element.config.elMinWidth.value.indexOf('px') > -1) {
47			return `repeat(auto-fit, minmax(${this.element.config.elMinWidth.value}, 1fr))`;
48			}
49
50			return null;
51			},
52
53			currentDeviceView() {
54			return this.cmsPageState.currentCmsDeviceView;
55			},
56
57			crossSelling() {
58			if (!this.element.data.product \|\| !this.element.data.product.crossSellings.length) {
59			return {
60			name: 'Cross selling title',
61			};
62			}
63
64			return this.element.data.product.crossSellings[0];
65			},
66
67			crossSellingProducts() {
68			return (this.element.data.product.crossSellings.length)
69			? this.element.data.product.crossSellings[0].assignedProducts
70			: [];
71			},
72
73			currentDemoEntity() {
74			if (this.cmsPageState.currentMappingEntity === 'product') {
75			return this.cmsPageState.currentDemoEntity;
76			}
77
78			return null;
79			},
80			},
81
82			watch: {
83			'element.config.elMinWidth.value': {
84			handler() {
85			this.setSliderRowLimit();
86			},
87			},
88
89			currentDeviceView() {
90			setTimeout(() => {
91			this.setSliderRowLimit();
92			}, 400);
93			},
94			},
95
96			created() {
97			this.createdComponent();
98			},
99
100			mounted() {
101			this.mountedComponent();
102			},
103
104			methods: {
105			createdComponent() {
106			this.initElementConfig('cross-selling');
107			this.initElementData('cross-selling');
108			},
109
110			mountedComponent() {
111			this.setSliderRowLimit();
112			},
113
114			setSliderRowLimit() {
115			if (isEmpty(this.element.config)) {
116			this.createdComponent();
117			}
118
119			if (this.currentDeviceView === 'mobile'
120			\|\| (this.$refs.productHolder && this.$refs.productHolder.offsetWidth < 500)
121			) {
122			this.sliderBoxLimit = 1;
123			return;
124			}
125
126			if (!this.element.config.elMinWidth.value \|\|
127			this.element.config.elMinWidth.value === 'px' \|\|
128			this.element.config.elMinWidth.value.indexOf('px') === -1) {
129			this.sliderBoxLimit = 3;
130			return;
131			}
132
133			if (parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10) <= 0) {
134			return;
135			}
136
137			// Subtract to fake look in storefront which has more width
138			const fakeLookWidth = 100;
139			const boxWidth = this.$refs.productHolder.offsetWidth;
140			const elGap = 32;
141			let elWidth = parseInt(this.element.config.elMinWidth.value.replace('px', ''), 10);
142
143			if (elWidth >= 300) {
144			elWidth -= fakeLookWidth;
145			}
146
147			this.sliderBoxLimit = Math.floor(boxWidth / (elWidth + elGap));
148			},
149
150			getProductEl(product) {
151			return {
152			config: {
153			boxLayout: {
154			source: 'static',
155			value: this.element.config.boxLayout.value,
156			},
157			displayMode: {
158			source: 'static',
159			value: this.element.config.displayMode.value,
160			},
161			},
162			data: {
163			product,
164			},
165			};
166			},
167			},
168			};
169

shopware / platform

Push — trunk ( 8d97f6...0d07dc )

src/Administration/Resources/app/administration/src/module/sw-cms/elements/cross-selling/component/index.js A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like