Доработка интернет-магазин на Opencart

TECHNICAL TASK (TT)for the development of a premium landing page“Purified Drinking Water”1. General Information about the Project Website type: One-page premium landing page with high conversion and the possibility of expanding into a full-fledged website with a blog/knowledge base. Goal: Attract leads (consultation requests), build trust in the brand through emotional visuals, scientific facts, and demonstration of the company's values. Platform: The contractor offers the optimal platform (Webflow or WordPress + Bricks Builder) with justification in the commercial proposal. Preference is given to solutions that provide clean code, high speed, and premium visuals without template solutions.2. Target Audience Families (especially with children) who care about health and quality of life. People who value thoughtful kitchen solutions, quality purified water, and long-term home solutions. Individuals aged 30–55, middle and upper income, looking for a reliable partner for installing a water purification system with service.3. Visual Style and Design (UI/UX) Reference: A reference layout is attached (image of a phone with a hero section and a “Values” block). The style should fully match this layout: clean, bright, premium lifestyle with warm accents. Color scheme: White and light gray background (cleanliness), elements of natural wood or warm accents, sunny orange/yellow CTA buttons, deep blue/anthracite for text. Images: Exclusively premium lifestyle. Lively emotional people (not looking at the camera), soft morning sunlight, natural colors. No artificial stock photos. Typography: Modern, readable, with sufficient line spacing and white space. Professional level without overload.4. Structure of the Landing Page (6 main blocks)BLOCK 1. Main Screen (Hero) Visual: Large bright photo covering the entire screen — a modern kitchen, mom, dad, daughter, and son drinking clean water from glass cups, smiling, soft morning sun. Headline: “Your health starts with a sip of purified drinking water.” Subheadline: Water purification systems with lifetime service for your family every day. CTA button: “Get Expert Consultation” (orange/yellow, noticeable).BLOCK 2. Our Values and Philosophy (Founder's Address) Visual: Professional photo of the owner (smart casual, open and trustworthy appearance). Text (from reference): OUR MISSION Personal address: CTA: “I want to be healthy” (scroll to Block 3 or form).BLOCK 3. Educational Course (Scientific Approach) Headline: Learn more about the water you drink! Format: Stylish interactive grid with 10 clickable blocks/cards. Each card leads to a separate article/video page (recommended for SEO) or a modal window with full text/video. Note: Texts/videos of articles are provided by the Client. The contractor ensures a convenient structure and attractive display.BLOCK 4. Purified Drinking Water Changes the Taste of Life! (Emotional Evidence) 4 premium cards in a grid or collage: Health: A girl drinks purified water. Text: “Restore your health sip by sip.” Borscht / Dishes: Macro shot of borscht with steam. Text: “Experience the rich taste of your dishes with purified drinking water.” Coffee / Tea: A father brews coffee, a grandmother with a cup of tea. Text: “Unleash the true aroma of coffee and enjoy fragrant tea.” Household / Appliances: A daughter irons a shirt with clean steam. Text: “Keep your appliances for years: perfect steam without scale.”BLOCK 5. Comprehensive Solution (Product) Visual: Aesthetic montage of a 5-stage reverse osmosis system under the sink (clean look, no chaos of pipes) + stylish separate faucet on the countertop. Text: Benefits through the end result for the client (cleanliness, taste, care for health). Offer: “Turnkey system + Professional installation + Lifetime service.”BLOCK 6. Trust Block (Social Proof and Guarantees) Main trigger: Large accent banner: “If you do not like the quality of the water — return the system within 60 days (0% risk).” Elements: Carousel of reviews (videos or screenshots of real correspondence). Gallery of real works “Before / After” installation. Logos / mentions (if any).5. Functional and Technical RequirementsForms and Lead Generation Consultation form with fields: Name, Phone, City/Region, “What water do you have now?” (or a short question). Integration with Telegram bot or CRM (at the Client's choice).Analytics and Marketing Google Analytics 4 + event on form submission. Meta Pixel (Facebook/Instagram). Conversion settings.Speed and SEO PageSpeed Insights ≥ 90 on mobile and desktop. Clean semantic markup, optimized images, lazy loading.Mobile Version Mobile-first design. Perfect display on iPhone and Android (reference — layout on phone).CMS and Articles Convenient system for adding and editing course articles (collection/posts).6. Stages of Execution and Approval (4 stages) Prototype (UX draft): Black-and-white layout scheme of blocks and buttons. Check logic and accents. Design concept (UI): Color layout of the first 3 blocks with approved photos. Check style, fonts, button colors. Full design: Visualization of all 6 blocks. Final adjustments to graphics. Layout and launch: Ready website on the chosen platform. Check speed, responsiveness, form functionality, analytics.7. Requirements for the Contractor Experience in creating premium landing pages for health, eco, technology, or lifestyle brands (portfolio with links is mandatory). Experience with Webflow or Bricks Builder (mandatory). Willingness to work in stages with interim approvals.8. What is Needed in the Commercial Proposal Recommended platform with justification (Webflow / WP + Bricks). Fixed cost with breakdown by stages (or fixed + possible adjustments). Execution timelines by stages. 2–3 relevant examples from the portfolio (links + short description). Support conditions after launch (first 1–3 months). Contact person and readiness for a call/meeting to discuss.9. Additional Information All text content (except reference phrases) is provided by the Client. Photos and visuals: The contractor creates, integrates, and optimizes. Domain and hosting: The Client provides or the contractor assists with the connection. Copyright: After full payment, all rights to the website transfer to the Client.

It is necessary to implement a full cookie consent management mechanism (Cookie Consent) on the OpenCart (3 pcs) websites and configure Google Consent Mode v2. Requirements: install and configure a CMP (Cookie Management Platform) or another solution for managing user consents; implement a full Cookie Consent banner with options to accept, reject, and configure cookie categories; set up Google Consent Mode v2 through Google Tag Manager; ensure correct transmission of consent statuses to Google Analytics 4, Google Ads, and other marketing services; configure the operation of analytical and advertising tags so that they only trigger according to the user permissions obtained. Currently, the cookie banner is only informational and does not manage consents, nor does it transmit their status to Google services. A complete setup is required in accordance with the current GDPR and Google Consent Mode v2 requirements.

It is necessary to add 129 products. There is an export file with the products, however, the standard import does not fit, as it is necessary to create the catalog structure before uploading: categories, sections, and if necessary, subcategories. After that, perform the product import and check that all cards are correctly distributed among the categories. If you have experience with similar tasks, please send examples of your work, completion times, and costs.

WHAT NEEDS TO BE DONE The work is divided into blocks; you can take on everything or individual blocks: Block 1 — Speed Optimization (Mobile-First) The current PageSpeed score for the mobile version is 51/100. It needs to be raised to 80+. Target metrics: LCP < 2.5 s (currently 7.4 s), FCP < 1.8 s (currently 3.9 s), TBT < 200 ms. Tasks: critical CSS inline, deferred JS, WebP/AVIF, lazy load, plugin audit. Block 2 — GTM and Analytics Remove hardcoded GA4/Google Ads scripts from header.php. Install and configure the GTM4WP plugin. Implement Google Consent Mode v2 (script or cookie banner). Block 3 — Product Card Template A single Mobile-First Single Product template in Elementor. Sticky "Buy" button while scrolling on mobile. Cross-sell block of services under the purchase button. Check the automatic transmission of events view_item, add_to_cart via GTM4WP. Block 4 — Product Feed for Google Merchant Center Install Product Feed Pro (AdTribes) or CTX Feed. Configure XML feed with correct field mapping (id, title, gtin, brand, price, availability). Daily updates via WP-Cron, auto-exclusion of products "out of stock". Block 5 — 6 Landing Pages in Elementor 3 e-commerce pages: catalog of components, ready solutions for UPS, SES kits. 3 lead generation pages: turnkey UPS installation, SES for home, solutions for business. There are detailed prototypes with the structure and blocks of each page. Block 6 — Forms and dataLayer Events 6 unique dataLayer events upon successful form submission (CF7 and Elementor Pro Forms). Mandatory requirements for all forms: phone input mask, protection against resubmission, reCAPTCHA v3 or Honeypot. --- REQUIREMENTS — Practical experience with Elementor Pro (Single Product templates, custom Page Templates) — Understanding of WooCommerce dataLayer and GTM4WP functionality — Experience in WordPress speed optimization (Critical CSS, WebP, WP Rocket or similar) — Experience in setting up dataLayer events for CF7 or Elementor Pro Forms — Portfolio or examples of similar work — mandatory Knowledge of Google Consent Mode v2 will be an advantage. --- WORK CONDITIONS The site is on live hosting — all changes only through staging or test duplicate. Any optimization should not disrupt the initialization of GTM and the dynamic dataLayer. A detailed technical specification will be provided after the first contact. Payment is staged by blocks or for the entire project (we will agree) Please write in your response: 1. Your experience with similar tasks (links or a brief description of the case) 2. Whether you are ready to perform the entire project or individual blocks 3. Estimated cost and timelines after reviewing the technical specification

Order description: We are looking for an experienced frontend developer/OpenCart specialist to optimize the loading speed of the website (categories and product cards) according to Google Core Web Vitals requirements. About the project: * CMS: OpenCart. * Specifics: The site operates in catalog mode (no cart or checkout). * Volume: 2900 items. * Server part: Already optimized (runs on OpenLiteSpeed). * Stack: Work is done exclusively with the template code, modifiers, and frontend. No work with the database. What needs to be done (Technical task): 1. Delayed loading of scripts (Delay JS): * Problem: Third-party analytics scripts (GTM, Google Tag) block the main thread on mobile devices for about 4.3 seconds. * Task: Set up delayed execution of these scripts. The scripts should activate strictly on the first user action (first scroll, tap on the screen, or mouse movement). * Important: Data collection, analytics, and ad functionality must remain intact. 2. Fixing the CLS metric (Layout Stability): * Problem: The page "jumps" and shifts during image loading. * Task: In the style files or theme template, hardcode the HTML attributes width and height for all product images in the catalog (listings) and product cards. * Goal: Reserve space for images in the DOM tree until they are actually loaded to prevent content shifting. Ensure that responsiveness (CSS) is not broken. 3. Optimization of the critical path (LCP): * Task: Add the fetchpriority="high" tag for the main product image on the first screen. This will instruct the browser to load the main product photo as a priority. Requirements for the performer and acceptance conditions: 1. No unnecessary modules: Work is performed with clean code/modifiers, without installing additional third-party or paid optimization plugins. 2. Security and layout: You are fully responsible for the layout. After making changes, the visual display of the site on mobile and PC, as well as functionality (filters, photo switching in the gallery, menu) must remain unchanged. 3. Criteria for job submission (DoD): Provide a screenshot and a link to a live test report from Google PageSpeed Insights (for the mobile version). The performance score must be no lower than 75 points, and the CLS metric must be no more than 0.1 (in the green zone). Changes must be made strictly through modifiers (OCMOD) or a copy of the theme to avoid overwriting core updates. In your response, please indicate: 1. Have you had experience configuring Delay JS specifically for GTM on OpenCart? 2. The estimated time for task completion. 3. The cost of the work.