Discount App Dev With Remix Template - How To Create UI for editing the saved discount?

Store Design
1

Hi guys,

Hi have used the Shpify CLI to create a Remix App, it checks the cart to see if x specific product variants are present and applies a discount if all x specific variants are present and its cart lines quantity are the same. I did a UI so the discount and the products can be easily configured when creating the discount, it uses polaris and app bridge off course, all is working great, the discount is created successfully and warks great, but when I click on it in the admin panel > discounts it shos a 404 I know that it is because i havent set a .jsx to render the UI responsible for this, thing is I dont know how hahaha, I ksow this:
app.volume-discount.$functionId.new.jsx does all the work for generating the UI dynamically, how do i achieve the same, but for the editing UI of the already created discounts ?

2

I think I understand your question: Basically, you have created the page app.volume-discount.$functionId.new.jsx that creates the discount. But you do not know how to edit the discounts?

You can think of this as 3 parts. You have your page that lists all the discounts, you have your page to create discounts, and you have your page to manage discounts.

If so, I think this part of the QRCode remix tutorial will be helpful: https://shopify.dev/docs/apps/getting-started/build-qr-code-app?framework=remix

Set up the form route
Create a form that can create, update or delete a QR code.

In the app > routes folder, create a new file called app.qrcodes.$id.jsx.

Dynamic segments
This route uses a dynamic segment to match the URL for creating a new QR code and editing an existing one.

If the user is creating a QR code, the URL is /app/qrcodes/new. If the user is updating a QR code, the URL is /app/qrcodes/1, where 1 is the ID of the QR code that the user is updating.

Remix layouts
The Remix template includes a Remix layout at app/routes/app.jsx. This layout should be used for authenticated routes that render inside the Shopify admin. It's responsible for configuring App Bridge and Polaris, and authenticating the user using shopify-app-remix.

Where it says If the user is creating a QR code, the URL is /app/qrcodes/new. If the user is updating a QR code, the URL is /app/qrcodes/1, where 1 is the ID of the QR code that the user is updating.

So basically to manage the discount code you use the same page, you just conditionally check the variable to see if it is new or a QRCode ID.

Now, you can go a different route if you so choose and create a separate file called app.manage-volume-discount.$discountId.jsx which will manage your tags. Then you would just link to the new page like this:

/app/manage-volume-discount/${discountId}
3

Thanks SomeUsernameHe, but how do I link to the new page ? I have no idea.

4

You would use something like this:

// Import necessary React, Polaris components and useNavigate hook from react-router-dom
import React, { useState } from 'react';
import { Page, Card, DataTable, Button } from '@shopify/polaris';
import { useNavigate } from 'react-router-dom'; // Import useNavigate hook

// AppExample component
function AppExample() {
  // Initialize navigate function using useNavigate hook
  const navigate = useNavigate();

  // Test data for the table
  const [discounts, setDiscounts] = useState([
    { id: 'discount1', name: 'Summer Sale' },
    { id: 'discount2', name: 'Winter Sale' },
    { id: 'discount3', name: 'Black Friday' },
  ]);

  // Function to handle the manage button click
  const handleManageClick = (discountId) => {
    // Use navigate function to change the route programmatically
    navigate(`/app/manage-volume-discount/${discountId}`);
  };

  // Generate row markup for the DataTable
  const rows = discounts.map((discount) => [
    discount.name,
    ,
  ]);

  return (
    
  );
}

export default AppExample;

Where you pass the variable $discountId like this:

const handleManageClick = (discountId) => {
    // Use navigate function to change the route programmatically
    navigate(`/app/manage-volume-discount/${discountId}`);
  };